<script setup lang="ts">
import { EnumOpType } from "@renderer/assets/types";
import GroupBtnWithDropdown from "@renderer/view/components/components/GroupBtnWithDropdown.vue";
import {useSystemSettingStore} from '@renderer/store/pinia/systemSetting'
const showSettings = [
  {
    label: '窗口标注信息',
    key: 'showFourConner',
    disabled: false,
  },
  {
    label: '患者脱敏显示',
    key: 'deIdentificationShow',
    disabled: true,
  },
  {
    label: '比例尺',
    key: 'showPercentRule',
    disabled: false,
  },
  {
    label: 'Dicom Overlay',
    key: 'showDicomOverlay',
    disabled: true,
  },
  {
    label: '伪彩条',
    key: 'showPseudoStrip',
    disabled: false,
  },
  {
    label: '定位线',
    key: 'showAlignmentLine',
    disabled: true,
  },
  {
    label: '窗口大小自适应',
    key: 'windowAutosize',
    disabled: true,
  }
];

const systemSettingStore = useSystemSettingStore();

const handleSelect = (key,val) => {
  systemSettingStore.updateShowSettingVal( key, val)
}
</script>

<template>
  <group-btn-with-dropdown
    tips="显示设置"
    :op-type="{
      type: EnumOpType.showSettings,
      subType: ''
    }"
    icon="mdi-eye-settings-outline">

    <template #dropdownSlot>
        <v-card >
          <v-card-text>
            <template    v-for="item in showSettings">
              <v-checkbox
                :disabled="item.disabled"
                density="compact"
                :hide-details="true"
                :model-value="systemSettingStore.showSetting[item.key]"
                @update:model-value="val => handleSelect(item.key,val)"
                :label="item.label"
              >
              </v-checkbox>
              <template v-if="[ 'showPseudoStrip', 'showAlignmentLine'].includes(item.key)">
                  <v-divider :thickness="2"/>
              </template>
            </template>

          </v-card-text>
        </v-card>
    </template>
  </group-btn-with-dropdown>
</template>

<style scoped>

</style>
